<template>
    <div class="activity-comp">
        <div class="info-bannerb">
            <z-history></z-history>
            <div v-if="detail.newposter == null || detail.newposter == undefined"></div>
            <img class="image" v-if="detail.activityPoster != null" :src="picHead+detail.activityPoster">
            <!-- 活动介绍 -->
            <div class="pad">
                <div class="title" v-if="detail.activityTitle">{{detail.activityTitle}}</div>
                <div class="detailbox" v-if="detail.actStartTime">
                    <i class="iconfont icon-shizhong_ "></i>
                    <span class="detail">{{detail.actStartTime | stampFormate3}}至&nbsp;{{detail.actEndTime | stampFormate3}}</span>
                    <span class="state">{{state[detail.actStauts]}}</span>
                </div>
                <div class="detailbox" v-if="detail.newcity!=detail.newprov" @click="enterMap()">
                    <i class="iconfont icon-chanpin-didian "></i>
                    <span class="address_cl omit">{{detail.prov}}{{detail.city}}{{detail.dist}}{{detail.activityAddress}}
                        <i class="iconfont icon-jiantou address-icon "></i>
                    </span>
                </div>
                <div class="detailbox" v-if="detail.newcity == detail.newprov" @click="enterMap()">
                    <i class="iconfont icon-chanpin-didian "></i>
                    <span class="address_cl omit">{{detail.city}}{{detail.dist}}{{detail.activityAddress}}
                    </span>
                    <i class="iconfont icon-jiantou address-icon " style="float:right"></i>
                </div>
                <div class="detailbox  detail_price"><i class="iconfont icon-piaojia "></i>
                    <span v-if="detail.minTicketPrice == detail.maxTicketPrice && detail.maxTicketPrice ==0"
                          class="detail font1">免费</span>
                    <span v-if="detail.minTicketPrice != detail.maxTicketPrice"
                          class="detail font1">￥{{detail.minTicketPrice | moneyFormate}} - {{detail.maxTicketPrice | moneyFormate}}</span>
                    <span v-if="detail.minTicketPrice == detail.maxTicketPrice && detail.maxTicketPrice !=0"
                          class="detail font1">￥{{detail.minTicketPrice | moneyFormate}}</span>
                </div>
                <div class="detailbox" v-if="detail.actApplyNum || detail.peoUpperLimit">
                    <i class="iconfont icon-wode "></i>
                    <span class="postdetail" v-if="detail.showUsers == '1'">已 {{detail.actApplyNum}} 人报名</span>
                    <span class="postdetail">限{{detail.peoUpperLimit }}人</span>
                    <div class="people">
                        <span v-for="item in people">
                            <img class="headImg" :src="picHead+item.headImg" alt="">
                        </span>
                    </div>
                </div>
                <author :author="publish" autype="2" v-if="publish"></author>
            </div>

            <!-- 是否有直播 -->
            <div class="pad living"
                 v-if="detail.liveWatchNo != null && detail.liveWatchNo != undefined && detail.liveWatchNo != ''">
                <span>在线直播</span>
                <router-link class="liveDoor" :to="{name:'liveDetails',params:{did:detail.liveWatchNo}}">直播入口
                </router-link>
            </div>

            <!-- 活动详情 -->
            <div class="detail-box">
                <div class="detail-title"><span class="left-line"></span>活动详情</div>
                <div class="html-content contecntpad" v-html="detail.activityDetails"></div>
            </div>
            <div class="fengexian"></div>
        </div>
    </div>
</template>

<script>
    import {actService} from '../../service/activityService'
    import author from '../../component/list/author.vue'

    export default {
        props: ['detail','publish'],
        components:{author:author},
        data () {
            return {
                picHead:this.$store.state.picHead,
                state:['未开始','进行中','已结束'],
                people:[]
            }
        },
        mounted: function () {
            let that = this;
            if(that.detail.showUsers == '1'){
                let params={
                    id:that.$route.params.actId,
                    pageNo:1,pageSize:5
                }
                actService.getpeople(params).then(function(res){
                    console.log(res.data.datas.datas);
                    that.people=res.data.datas.datas

                })
            }
        },
        methods: {
            enterMap: function () {
                const that = this
                that.$router.replace({
                    name: 'activityPlace',
                    query: {place: that.detail.city + that.detail.dist + that.detail.activityAddress}
                })
            }
        }
    }
</script>

<style lang="less">
.activity-comp {
    .detail-box {
        background:#fff;
        .detail-title{
            padding:15px 0 0 15px;
            font-size: 16px;
            color: #333333;
            .left-line{
                background: #20A0FF;
                width: 2px;
                display: inline-block;
                height: 13px;
                margin-right: 10px;
            }
        }
    }
    .detail_price {
        white-space: nowrap;
        color: #20A0FF;
    }
    .address_cl {
        float: left;
        width: 7.5rem;
        font-size: .373rem;
        color: #666666;
    }

    .address-icon {
        margin-left: .02rem !important;
        color: #6699FF;
        bottom: 0px !important;
        // -webkit-transform: rotate(180deg);
        // transform: rotate(180deg);
    }

    .comment-title {
        // width:100%;
        padding: 0.8rem 0.4rem 0.8rem 0.4rem;
        .comment-title-wire {
            width: 3px;
            border: 1.5px;
            height: 16px;
            background: #6699FF;
            float: left;
            margin-top: 3px;
        }
        .comment-title-text {
            width: 3rem;
            text-align: left;
            font-size: 16px;
            color: #333333;
            margin-left: 7px;
        }
    }

    .commentbox {
        width: 100%;
        padding: 0 0.4rem;
        box-sizing: border-box;
        overflow: hidden;
        margin-bottom: .33rem;
        .commentlists-no {
            height: 2.1rem;
            line-height: 2.1rem;
            font-size: 13px;
            color: #999999;
            letter-spacing: 0;
        }
        .comment-list {
            width: 100%;
            padding: 16px 0 16px 0;
            border-bottom: 1px solid #EEEEEE;
            display: inline-block;
            .comment-list-left {
                width: 1.1rem;
                height: 1.1rem;
                border-radius: 100%;
                overflow: hidden;
                float: left;
                img {
                    width: 100%;
                    height: 100%;

                }
            }
            .comment-list-right {
                width: 7.5rem;
                float: left;
                margin-left: 0.27rem;
                .comment-list-top {
                    width: 100%;
                    height: 0.67rem;
                    .comment-list-name {
                        font-size: 16px;
                        color: #666666;
                        float: left;
                    }
                    .comment-list-reply {
                        text-align: center;
                        width: 1.33rem;
                        height: 0.67rem;
                        float: right;
                        line-height: 0.67rem;
                        background: #F9F9F9;
                        border-radius: 50px;
                        font-size: 12px;
                        color: #333333;
                        letter-spacing: 0;
                        text-align: center;
                    }
                }
                .comment-list-center {
                    text-align: left;
                    font-size: 14px;
                    color: #1F2D3D;
                    letter-spacing: 0;
                    line-height: 20px;
                    margin-top: 0.29rem;
                }
                .comment-list-time {
                    width: 100%;
                    height: 0.43rem;
                    margin-top: 0.27rem;
                    font-size: 11px;
                    color: #999999;
                    letter-spacing: 0;
                    text-align: left;
                }
                .comment-reply-content {
                    background: #F9F9F9;
                    border-radius: 2px;
                    padding: 0.27rem 0.27rem 0 0.27rem;
                    text-align: left;
                    font-size: 14px;
                    color: #151515;
                    letter-spacing: 0;
                    line-height: 20px;
                    margin-top: 0.37rem;
                    overflow: hidden;
                    .comment-reply-back {
                        margin-bottom: 0.26rem;
                    }
                    span {
                        color: #999;
                    }
                }
            }
        }
        .comment-list:last-child {
            border-bottom: none;
        }
    }

    .info-bannerb{
        background-color: #f9f9f9;
        width:100%;
        position:relative;
        .detailbox{
            margin-bottom: .03rem;
            float: left;
            line-height: 1.3333rem;
            border-bottom: 1px solid #f0f0f0;
            height: 1.3333rem;
            overflow: hidden;
            width: 100%;
            .postdetail{
                // margin-left: .7rem;
                width: 8rem;
                text-align: left;
                font-size: .373rem;
                color: #666666;
                margin-bottom: .18rem;
            }
            .iconfont{
                display: inline !important;
                color: #666;
                font-size:.3733rem;
                float:left;
                margin-right:.24rem;
                // position:absolute;
                // top:.05rem;
                // margin-left: .1rem;
            }
            .people{
                float: right;
                padding-top: .2rem;
                .headImg{
                    height:.8rem;
                    border-radius: 50%;
                    margin-left: -.4rem;
                    border: 2px solid #fff;
                    float: right;
                }
            }
        }

        .title{
            margin-bottom: .25rem;
            font-size: .588rem;
            color: #333333;
            text-align: left;
            font-weight:600;
        }
        .image{
            width:100%;
            height:4.98rem;
        }
        .detail{
            // margin-left: .7rem;
            display:inline-block;
            max-width: 8.3rem;
            text-align: left;
            font-size:.373rem;
            color: #666666;
        }.state {
             font-size: 9px;
             color: #FFFFFF;
             background: #20A0FF;
             padding: 1px 2px 2px;
         }
        .pad {
            padding: .3rem .4rem;
            background-color: #fff;
            margin-bottom: .26rem;
            overflow: hidden;
        }
        .living{
            height:1rem;
            line-height:1rem;
            span{
                font-size: .426rem;
                color: #333333;
                float:left;
            }
            a{
                line-height: .5rem;
                float:right;
                font-size: .37rem;
                color: #6699FF;
                border: 1px solid #6699FF;
                box-shadow: inset 0 0 0 0 #C0CCDA;
                border-radius: 69px;
                padding:.18rem .32rem;
            }
        }
    }
    .contecntpad{
        width:100%;
        background:#fff;
        img{
            max-width:100%;
        }
    }
}

</style>